<template>
	<div class="account-management">
		<!-- 账户类型切换 -->
		<div class="account-type-selector">
			<div class="type-tabs">
				<div class="type-tab" :class="{ 'active': activeAccount == '1' }" @click="changeAccount(1)">
					<div class="tab-content">
						<img class="tab-icon" src="@/assets/images/user/account-card.png" alt="">
						<span>{{ $t('setting.settingCard') }}</span>
					</div>
					<div class="tab-indicator"></div>
				</div>

				<div class="type-tab" :class="{ 'active': activeAccount == '2' }" @click="changeAccount(2)">
					<div class="tab-content">
						<img class="tab-icon" src="@/assets/images/user/account-paypal.png" alt="">
						<span>Paypal</span>
					</div>
					<div class="tab-indicator"></div>
				</div>
			</div>
		</div>

		<!-- 账户管理头部 -->
		<div class="account-header">
			<!-- <div class="account-count">
				{{ $t('setting.settingCreatedLeft') }}
				<span class="highlight">{{ userAddressList.length }}</span>
				{{ $t('setting.settingCreatedRight') }}
			</div> -->

			<Button type="primary" icon="ios-add" class="add-account-btn" @click="addOpen">
				{{ $t('setting.settingAddAccount') }}
			</Button>
		</div>

		<Table :columns="columns" :data="userAddressList">
			<template slot-scope="{ row }" slot="addressDetail">
				<div class="address-detail">{{ row.addressDetail }} {{ row.areaText ? row.areaText + "," : "" }}
					{{ row.cityText ? row.cityText + "," : "" }}
					{{ row.provinceText }},{{ row.countryText }}</div>

				<div style="font-size: 14px;" class="address-phone">+{{ row.regionCode }} {{ row.mobile }}
				</div>
			</template>
			<template slot-scope="{ row }" slot="action">
				<div class="address-actions">
					<Button type="text" @click="editOpen(row)">
						{{ $t("user.edit") }}
					</Button>
					<Button type="text" @click="onDeleteAddress(row.id)">
						{{ $t("user.delete") }}
					</Button>
					<!-- <Button type="text" @click="onCopy(row)">
						{{ $t("user.copy") }}
					</Button> -->
					<Button v-if="!row.isDefault" type="text" @click="onSetAddressDefault(row.id)">
						{{ $t("user.setDefault") }}
					</Button>

					<span v-if="row.isDefault" class="default-tag">
						{{ $t("user.defaultAddress") }}
					</span>
				</div>
			</template>
		</Table>

		<!-- 账户列表 -->
		<!-- <div class="account-list"> -->
		<!-- 银行卡列表 -->
		<!-- <div v-if="activeAccount == '1'">
				<div v-for="(item, index) in userAddressList" :key="index" class="account-card">
					<account-item :item="item" :showDefault="true" @delItem="onDeleteAddress" @editItem="editOpen"
						@defaultItem="onSetAddressDefault" />
				</div>
			</div> -->

		<!-- Paypal列表 -->
		<!-- <div v-if="activeAccount == '2'">
				<div v-for="(item, index) in userAddressList" :key="index" class="account-card">
					<paypal-item :item="item" :showDefault="true" @delItem="onDeleteAddress" @editItem="editOpen"
						@defaultItem="onSetAddressDefault" />
				</div>
			</div> -->

		<!-- 加载状态 -->
		<!-- <div class="loading-state" v-if="moreLoading">
				<Spin size="large"></Spin>
			</div> -->

		<!-- 空状态 -->
		<!-- <div class="empty-state" v-if="!moreLoading && userAddressList.length == 0">
				<Icon type="ios-card-outline" size="48" />
				<p>{{ $t('common.noData') }}</p>
			</div> -->
		<!-- </div> -->

		<!-- 编辑组件 -->
		<card-edit ref="cardRef" @editSuccess="getAddressList"></card-edit>
		<paypal-edit ref="paypalRef" @editSuccess="getAddressList"></paypal-edit>
	</div>
</template>

<script>
import { deleteCard, setCardDefault, userCardList } from "@/api/card";
import TLoading from "@/components/t-loading";
import TNoData from "@/components/t-no-data";
import accountItem from './account-item';
import paypalItem from './paypal-item';
import cardEdit from './card-edit';
import paypalEdit from './paypal-edit';

export default {
	name: "user-bank",
	components: { TNoData, TLoading, accountItem, paypalItem, cardEdit, paypalEdit },
	data() {
		return {
			moreLoading: false,
			loading: false,
			userAddressList: [],
			activeAccount: '1',
			columns: [
				{
					title: 'Recipient Name',
					key: 'payeeName'
				},
				{
					title: 'Recipient Currency',
					key: 'currency',
				},
				{
					title: 'Bank Name',
					key: 'payeeBank',
				},
				{
					title: 'Bank Card Number',
					key: 'payeeAccount',
				},
				{
					title: 'Operate',
					slot: 'action',
					width: 300,
				},
			]
		}
	},
	created() {
		this.getAddressList();
	},
	methods: {
		onSetAddressDefault(item) {
			// 设置默认地址
			setCardDefault(item.id).then((res) => {
				this.$Message.success(this.$t('user.setSuccess'));
				this.getAddressList();
			})
		},
		edit(info) {
			// 编辑
			this.formValidate = { ...this.formValidate, ...info };
		},
		onDeleteAddress(item) {
			// 删除地址
			deleteCard(item.id).then((res) => {
				this.$Message.success(this.$t('user.deletedSuccessfully'));
				this.getAddressList();
			})
		},
		onDelete() {
			this.$Modal.confirm({
				title: this.$t('user.removeAddress'),
				content: this.$t('user.confirmDeleteAddress')
			});
		},
		// 获取银行卡列表
		getAddressList() {
			this.moreLoading = true;
			userCardList({ payeeType: this.activeAccount }).then((res) => {
				this.userAddressList = res.result;
				this.moreLoading = false;
			}).catch(() => {
				this.moreLoading = false;
			})
		},
		//切换类型
		changeAccount(type) {
			if (this.activeAccount != type) {
				this.activeAccount = type;
				this.userAddressList = [];

				if (type == 1) {
					this.columns = [
						{
							title: 'Recipient Name',
							key: 'payeeName'
						},
						{
							title: 'Recipient Currency',
							key: 'currency',
						},
						{
							title: 'Bank Name',
							key: 'payeeBank',
						},
						{
							title: 'Bank Card Number',
							key: 'payeeAccount',
						},
						{
							title: 'Operate',
							slot: 'action',
							width: 300,
						},
					]
				} else {
					this.columns = [
						{
							title: 'PayPal Account',
							key: 'payPalAccount',
						},
						{
							title: 'Operate',
							slot: 'action',
							width: 300,
						},
					]
				}
				this.getAddressList();
			}
		},
		//新增提现账号
		addOpen() {
			if (this.activeAccount == 1) {//银行卡
				this.$refs.cardRef.open();
				return;
			}
			this.$refs.paypalRef.open();
		},
		//编辑
		editOpen(e) {
			if (this.activeAccount == 1) {//银行卡
				this.$refs.cardRef.open(e);
				return;
			}
			this.$refs.paypalRef.open(e);
		}
	}
}
</script>

<style scoped lang="less">
.account-management {
	width: 100%;
	margin: 0 auto;

	/deep/ .ivu-table-body .ivu-table-cell {
		padding: 20px 12px;
	}

	.default-tag {
		background: #FFEDF3;
		color: #FF186B;
		padding: 2px 8px;
		border-radius: 4px;
		font-size: 12px;

	}
}

.account-type-selector {
	margin-bottom: 24px;

	.type-tabs {
		display: flex;
		border-bottom: 1px solid #e8eaec;

		.type-tab {
			padding: 0 24px;
			cursor: pointer;
			position: relative;

			.tab-content {
				display: flex;
				align-items: center;
				padding: 12px 0;

				.tab-icon {
					width: 24px;
					height: 24px;
					margin-right: 8px;
				}

				span {
					font-size: 14px;
					color: #657180;
				}
			}

			.tab-indicator {
				position: absolute;
				bottom: -1px;
				left: 0;
				right: 0;
				height: 2px;
				background-color: transparent;
				transition: all 0.2s ease-in-out;
			}

			&.active {
				.tab-content span {
					color: #FF186B;
					font-weight: 500;
				}

				.tab-indicator {
					background-color: #FF186B;
				}
			}

			&:hover:not(.active) {
				.tab-content span {
					color: #FF186B;
				}
			}
		}
	}
}

.account-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;

	.account-count {
		font-size: 14px;
		color: #657180;

		.highlight {
			color: #FF186B;
			font-weight: 500;
			margin: 0 4px;
		}
	}

	.add-account-btn {
		padding: 6px 12px;
		height: auto;
	}
}

.account-list {
	.account-card {
		background: #fff;
		border-radius: 4px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		margin-bottom: 12px;
		transition: all 0.2s ease-in-out;

		&:hover {
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		}
	}

	.loading-state {
		text-align: center;
		padding: 40px 0;
	}

	.empty-state {
		text-align: center;
		padding: 40px 0;
		color: #657180;

		i {
			margin-bottom: 16px;
		}

		p {
			margin-top: 8px;
			font-size: 14px;
		}
	}
}
</style>